<template>
	<view>
		<view class="PromoterRank">
			<view class="redBg bg-color">
				<view class="header">
					<view class="nav acea-row row-center-wrapper">
						<view class="item" :class="active === index ? 'font-color' : ''" v-for="(item, index) in navList"
                  :key="index" @click="switchTap(index)">
							{{ item }}
						</view>
					</view>
          <!-- top3 排名 -->
					<view class="rank acea-row row-bottom row-around">
						<view class="item" v-show="Two.id">
							<view class="pictrue">
								<image :src="Two.avatar"></image>
							</view>
							<view class="name line1">{{Two.nickname}}</view>
							<view class="num">{{ Two.brokerageUserCount }}人</view>
						</view>
						<view class="item" v-show="One.id">
							<view class="pictrue">
								<image :src="One.avatar"></image>
							</view>
							<view class="name line1">{{One.nickname}}</view>
							<view class="num">{{ One.brokerageUserCount }}人</view>
						</view>
						<view class="item" v-show="Three.id">
							<view class="pictrue">
								<image :src="Three.avatar"></image>
							</view>
							<view class="name line1">{{Three.nickname}}</view>
							<view class="num">{{ Three.brokerageUserCount }}人</view>
						</view>
					</view>
				</view>
			</view>
      <!-- 其它排名 -->
			<view class="list" v-if="rankList.length">
				<view class="item acea-row row-between-wrapper" v-for="(item,index) in rankList" :key="index">
					<view class="num">{{ index + 4 }}</view>
					<view class="picTxt acea-row row-between-wrapper">
						<view class="pictrue">
							<image :src="item.avatar"></image>
						</view>
						<view class="text line1">{{item.nickname}}</view>
					</view>
					<view class="people font-color">{{ item.brokerageUserCount }}人</view>
				</view>
			</view>
		</view>
		<home></home>
	</view>
</template>

<script>
	import { toLogin } from '@/libs/login.js';
	import { mapGetters } from "vuex";
	import home from '@/components/home';
  import * as BrokerageAPI from '@/api/trade/brokerage.js'
  import dayjs from "@/plugin/dayjs/dayjs.min.js";
  import * as DateUtil from '@/utils/date.js';
  import * as Util from '@/utils/util.js';
  export default {
		components: {
			home
		},
		data() {
			return {
				navList: ["周榜", "月榜"],
				active: 0,
				page: 1,
				limit: 10,
				type: 'week',
				loading: false,
				loadend: false,
				rankList: [],
        times: [],

        One: {}, // 排名第一
        Two: {}, // 排名第二
				Three: {}, // 排名第三
			};
		},
		computed: mapGetters(['isLogin']),
		watch:{
			isLogin:{
				handler:function(newV, oldV) {
					if (newV) {
						this.getRanklist();
					}
				},
				deep: true
			}
		},
		onLoad() {
			if (!this.isLogin) {
        toLogin();
        return;
			}
      this.calculateTimes();
      this.getRanklist();
    },
		methods: {
			getRanklist: function() {
				if (this.loadend || this.loading) {
          return;
        }
				this.loading = true;
        BrokerageAPI.getBrokerageUserRankPageByUserCount({
					pageNo: this.page,
					pageSize: this.limit,
					'times[0]': this.times[0],
					'times[1]': this.times[1],
				}).then(res => {
					let list = res.data.list;
					this.rankList.push.apply(this.rankList, list);
					if (this.page === 1) {
						this.One = this.rankList.shift() || {};
						this.Two = this.rankList.shift() || {};
						this.Three = this.rankList.shift() || {};
					}
					this.loadend = list.length < this.limit;
					this.loading = false;
					this.$set(this, 'rankList', this.rankList);
				}).catch(err => {
					this.loading = false;
				})
			},

			switchTap: function(index) {
				if (this.active === index) {
          return;
        }
				this.active = index;
				// week
				this.type = index ? 'month' : 'week';
				this.page = 1;
				this.loadend = false;
				this.$set(this, 'rankList', []);
				this.Two = {};
				this.One = {};
				this.Three = {};
        this.calculateTimes();
        this.getRanklist();
			},
      calculateTimes: function() {
        let times;
        if (this.type === 'week') {
          times = DateUtil.getWeekTimes();
        } else {
          times = DateUtil.getMonthTimes();
        }
        this.times = [ this.formatDate(times[0]), this.formatDate(times[1]) ]
      },
      formatDate: function(date) {
        return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
      },
		},
		onReachBottom: function() {
			this.getRanklist();
		}
	}
</script>
<style scoped lang="scss">
	.PromoterRank .redBg {
		padding: 45rpx 0 30rpx 0;
	}

	.PromoterRank .header {
		background: url("") no-repeat;
		width: 100%;
		height: 460rpx;
		background-size: 100% 100%;
	}

	.PromoterRank .header .nav {
		width: 450rpx;
		height: 66rpx;
		border: 1px solid #fff;
		border-radius: 33rpx;
		font-size: 30rpx;
		color: #fff;
		margin: 0 auto;
	}

	.PromoterRank .header .nav .item {
		width: 223rpx;
		height: 100%;
		text-align: center;
		line-height: 60rpx;
	}

	.PromoterRank .header .nav .item.font-color:nth-of-type(1) {
		background-color: #fff;
		border-radius: 33rpx 0 0 33rpx;
	}

	.PromoterRank .header .nav .item.font-color:nth-of-type(2) {
		background-color: #fff;
		border-radius: 0 33rpx 33rpx 0;
	}

	.PromoterRank .header .rank {
		padding: 0 20rpx;
		margin-top: 30rpx;
	}

	.PromoterRank .header .rank .item .pictrue {
		background: url("") no-repeat;
		background-size: 100% 100%;
		width: 136rpx;
		height: 177rpx;
		position: relative;
		margin: 0 auto;
	}

	.PromoterRank .header .rank .item .pictrue image {
		position: absolute;
		width: 130rpx;
		height: 130rpx;
		display: block;
		bottom: 2rpx;
		border-radius: 50%;
		left: 50%;
		margin-left: -65rpx;
	}

	.PromoterRank .header .rank .item:nth-of-type(2) .pictrue {
		background-image: url("");
		width: 156rpx;
		height: 205rpx;
	}

	.PromoterRank .header .rank .item:nth-of-type(2) .pictrue image {
		width: 150rpx;
		height: 150rpx;
		margin-left: -75rpx;
	}

	.PromoterRank .header .rank .item:nth-of-type(3) .pictrue {
		background-image: url("");
	}

	.PromoterRank .header .rank .item:nth-of-type(3) .pictrue image {
		margin-left: -64rpx;
	}

	.PromoterRank .header .rank .item .name {
		font-size: 30rpx;
		color: #fff;
		margin-top: 22rpx;
		text-align: center;
		width: 170rpx;
	}

	.PromoterRank .header .rank .item .num {
		font-size: 30rpx;
		color: #fff;
		text-align: center;
	}

	.PromoterRank .list {
		width: 710rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: -60rpx auto 0 auto;
		padding: 0 30rpx;
	}

	.PromoterRank .list .item {
		border-bottom: 1px solid #f3f3f3;
		height: 101rpx;
		font-size: 28rpx;
	}

	.PromoterRank .list .item .num {
		color: #666;
		width: 70rpx;
	}

	.PromoterRank .list .item .picTxt {
		width: 350rpx;
	}

	.PromoterRank .list .item .picTxt .pictrue {
		width: 68rpx;
		height: 68rpx;
	}

	.PromoterRank .list .item .picTxt .pictrue image {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 50%;
	}

	.PromoterRank .list .item .picTxt .text {
		width: 262rpx;
		color: #333;
	}

	.PromoterRank .list .item .people {
		width: 175rpx;
		text-align: right;
	}
</style>
